<template>
<div class="bh-form-horizontal bh-form-readonly bh-table-form bh-form-block">
  <div class="form-validate-block">
    <div :class="{'bh-form-group': true,'bh-required': item.options.required}">
      <label class="bh-form-label bh-form-readonly-label" :title="item.options.label">
        {{item.options.label}}
      </label>
      <div class="bh-ph-8 bh-form-readonly-input" emap-role="input-wrap">
        <div v-if="true" v-html="item.options.value"></div>
        <emap-editor
          v-else
          :options="editorOptions"
          ref="editor"
        />
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { EmapEditor } from 'bh-vue'

export default {
  name: 'rich-text',
  props: {
    options: Object,
    item: Object
  },
  data: () => ({
    editorOptions: {
      toolbar: [
          ['font', ['bold', 'underline', 'italic', 'clear']],
          ['fontname', ['fontname', 'fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['insert', ['link', 'unlink']],
      ],
    }
  }),
  methods: {
    // getValue() {
    //   console.log('get value editor', this.$refs.editor.getValue())
    //   return {
    //     [this.item.name]: this.$refs.editor.getValue()
    //   }
    // },
    // setValue(val) {
    //   console.log('set value', val)
    //   this.$refs.editor.setValue(val && val[this.item.name] || '')
    // },
  },
  components: {
    EmapEditor,
  }
}
</script>

<style lang="less" scoped>
</style>
